<template>
  <div class="item" :title="['equipment'].includes(item.type) ? '' : item.name">
    <ewg-tooltip>
      <img :src="item.img" :alt="item.name" />
      <div
        class="equip-icon"
        :class="[
          'grade' + grade,
          `${choseListIds.includes(item.id) ? 'choosed' : ''}`
        ]"
        ref="goodItem"
        @click="handleChose(item)"
        @click.right="handleChose(item)"
      ></div>
      <span v-if="!['equipment'].includes(item.type)">{{ item.count }}</span>
      <template
        v-slot:content
        v-if="item.type === 'equipment' && equipData.flag"
      >
        <equip-tooltip :equip="equipData.value"></equip-tooltip>
      </template>
    </ewg-tooltip>
  </div>
</template>
<script lang="ts">
import { useStore } from "@/store";
import { SysActionTypes } from "@/store/sys/action-types";
import { OptionsDataType } from "@/const/indexedDB";
import { Equipment, EquipDataType } from "@/const/equips/equipmentType";
import { computed, reactive, ref } from "vue";
const store = useStore();
export default {
  name: "GoodItem",
  props: ["item", "choseList"],
  emits: {
    choseItem: (payload: any) => {
      return payload;
    }
  },
  setup(props: any, context: any) {
    const equipDataInit: EquipDataType = {
      flag: false
    };
    const equipData = reactive(equipDataInit);
    const grade = ref(0);
    const goodItem = ref();
    const getEquipDetail = async (row: PackItem) => {
      const params: OptionsDataType = {
        index: row.id
      };
      const data: Equipment = await store.dispatch(
        SysActionTypes.SYS_GET_EQUIP,
        params
      );
      if (data) {
        data.id = row.id;
        equipData.value = data;
        equipData.flag = true;
        grade.value = data.grade;
      }
    };
    // 如果是装备则获取详情
    if (props.item.type === "equipment") {
      getEquipDetail(props.item);
    }
    const handleChose = (item: PackItem) => {
      // eslint-disable-next-line vue/custom-event-name-casing
      context.emit("choseItem", { id: item.id, ...equipData.value });
    };
    const choseListIds = computed(() => {
      return props.choseList.map(({ id }: { id: number }) => id);
    });
    return {
      goodItem,
      equipData,
      grade,
      handleChose,
      choseListIds
    };
  }
};
</script>
<style lang="scss" scoped>
.item {
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
  span {
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
  }
}
.left-menu {
  position: absolute;
  top: 0;
  left: 0;
  border: 3px solid $--color-white;
  background: $--color-black-half-quarter;
  border-radius: $--border-radius;
  padding: 5px;
  & > div {
    padding-bottom: 5px;
    color: $--color-white;
    &:last-of-type {
      padding-bottom: 0px;
    }
  }
}
.choosed {
  box-shadow: 0 0 15px 6px rgba($color: #ffffaa, $alpha: 0.8) inset;
}
</style>
